<template>
  <el-dialog
    v-dialogDrag
    :title="dialogTitle"
    :close-on-click-modal="false"
    class="dialogStyleSmall"
    :visible.sync="dialogVisible"
  >
    <el-form ref="form" :model="formData" :rules="rules" label-width="auto">
      <el-col :span="24">
        <el-form-item label="父级字段" prop="parentId">
          <treeselect
            v-model="formData.parentId"
            style="line-height: 36px"
            :options="fieldOptions"
            :show-count="false"
            placeholder="请选择父级字段"
            clearable
          />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="字段名称" prop="fieldName">
          <el-input v-model="formData.fieldName" placeholder="请输入字段名称" size="medium" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="字段英文" prop="fieldVal">
          <el-input v-model="formData.fieldVal" placeholder="请输入字段英文" size="medium" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="外部字段" prop="isExrernal">
          <el-select v-model="formData.isExrernal" clearable style="width: 100%" placeholder="请选择是否是外部字段" size="medium">
            <el-option
              v-for="item in externalOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="" prop="orderNum">
          <label slot="label" v-html="`排&emsp;&emsp;序`" />
          <el-input-number
            v-model="formData.orderNum"
            size="medium"
            style="width: 100%"
            controls-position="right"
            :min="0"
          />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="是否必填" prop="isRequired">
          <el-radio-group v-model="formData.isRequired">
            <el-radio label="0">是</el-radio>
            <el-radio label="1">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="cancel">取 消</el-button>
      <el-button size="medium" :disabled="btnDisabled" type="primary" @click="submitForm">保 存</el-button>
    </span>
  </el-dialog>
</template>

<script>
import treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  name: 'AddDialog',
  components: { treeselect },
  data() {
    return {
      // 外部字段
      externalOptions: [
        {
          label: '外部上',
          value: '0'
        },
        {
          label: '外部下',
          value: '2'
        },
        {
          label: '否',
          value: '1'
        }
      ],
      // 字段数组
      fieldOptions: [
        {
          label: '描述深度(m)',
          id: '1'
        },
        {
          label: '地层描述',
          id: '2'
        },
        {
          label: '密度',
          id: '3'
        }
      ],
      /* 表单 start */
      btnDisabled: false,
      dialogVisible: false, // 弹框显隐
      dialogTitle: '', // 弹框标题
      formData: {
        id: '',
        parentId: null,
        fieldName: '', // 字段名称
        fieldVal: '', // 字段英文
        isExrernal: '', // 外部字段
        isRequired: '', // 是否必填
        orderNum: 1 // 排序
      },
      // from表单审核
      rules: {
        fieldName: [{ required: true, message: '字段名称不能为空', trigger: 'blur' }],
        fieldVal: [{ required: true, message: '字段英文不能为空', trigger: 'blur' }],
        isExrernal: [{ required: true, message: '外部字段不能为空', trigger: 'blur' }],
        isRequired: [{ required: true, message: '是否必填不能为空', trigger: 'blur' }],
        orderNum: [{ required: true, message: '排序不能为空', trigger: 'blur' }]
      }
      /* 表单 end */
    }
  },
  methods: {
    handleAdd(title, id) {
      this.dialogTitle = title
      this.dialogVisible = true
      this.$nextTick(() => {
        this.emptyForm()
        if (id) {
          this.getDetailById(id)
        } else {
        // this.getMaxNum()
        }
      })
    },
    // async getMaxNum() {
    //   const { data } = await getMaxNum()
    //   this.formData.orderNum = data
    // },
    getDetailById(id) {
      // detailSupperType(id).then(res => {
      // console.log(res)
      this.formData = { ...id }
      // })
    },
    // 弹框取消按钮
    cancel() {
      this.dialogVisible = false
      this.emptyForm()
      this.btnDisabled = false
    },
    // 保存
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.formData.id) {
            // 修改
            // editSupperType(this.formData).then(res => {
            this.btnDisabled = false
            this.dialogVisible = false
            this.msgSuccess('修改成功')
            // })
          } else {
            // 新增
            // addSupperType(this.formData).then(res => {
            this.btnDisabled = false
            this.dialogVisible = false
            this.msgSuccess('保存成功')
            // })
          }
        }
      })
    },
    // 清空弹出
    emptyForm() {
      this.resetForm('form')
      this.formData.id = ''
    }
  }
}
</script>

